<template>
  <div ref="graphWrapRef" style="height:500px;position: relative;">
    <h2>我的第六个mxgraph</h2>
    <div id="graphcontainer6" ref="graphcontainer6" class="graphWrap2 graph-edit"></div>
  </div>
</template>

<script>
import _ from "lodash";
import mxgraph from '@/utils/mxgraph'
const { mxEvent, mxRubberband, mxGraph, mxConstants, mxGraphModel, mxClient, mxUtils } = mxgraph
const MxGraph = mxGraph
const MxRubberband = mxRubberband
const MxGraphModel = mxGraphModel

export default {

  data() {
    return {

    }
  },
  mounted() {
    this.init()

  },
  methods: {
    init() {
      // 
      var container = document.getElementById('graphcontainer6')
      mxEvent.disableContextMenu(container)
      const model = new MxGraphModel()
      const graph = new MxGraph(container, model)
      graph.setTooltips(true);

      // graph.getTooltip = function (state) {
      //   console.log(state,state.view,state.cell)
      //   var cell = state.cell;
      //   var model = this.getModel();

      //   if (model.isEdge(cell)) {
      //     var source = this.getLabel(model.getTerminal(cell, true));
      //     var target = this.getLabel(model.getTerminal(cell, false));

      //     return source + ' -> ' + target;
      //   }
      //   else {
      //     return this.getLabel(cell);
      //   }
      // };

      graph.getTooltipForCell = function (cell) {
        var obj={name:'张三',age:'19',books:['java思想','xxx实战']}
        return `<div>
        <h2>名字</h2><pan>${obj.name}</pan>
         <h2>年龄</h2><pan>${obj.age}</pan>
          <h2>书籍</h2><pan>${obj.books}</pan>
        </div>`
      };



      var parent = graph.getDefaultParent()

      // Adds cells to the model in a single step
      graph.getModel().beginUpdate()
      try {
        var start = graph.insertVertex(parent, null, '开始', 20, 20, 75, 75, 'start')
        var bill = graph.insertVertex(parent, null, '表单', 180, 20, 75, 75, 'bill')
        var check = graph.insertVertex(parent, null, 'check', 350, 20, 75, 75, 'check')
        var end = graph.insertVertex(parent, null, 'end', 500, 20, 75, 75, 'end')
        graph.insertEdge(parent, null, '', start, bill)
        graph.insertEdge(parent, null, '', bill, check)
        graph.insertEdge(parent, null, '', check, end)
      } finally {
        // Updates the display
        graph.getModel().endUpdate()
      }
    },


  },
}
</script>
<style scoped>
.graphWrap2 {
  position: relative;
  overflow: hidden;
  width: 821px;
  height: 341px;
  cursor: default;
  border: 1px solid grey;
}
.graph-edit {
  background: url("/images/grid.gif");
}
.graph-browse {
  background: none;
}
</style>


